<template>
  <el-table
    class="table-style"
    :data="tableData"
    :border="true"
    max-height="82vh"
  >
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="username" label="账号" />
    <el-table-column prop="nickname" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="createTime" label="添加时间" />
    <el-table-column prop="loginTime" label="最后登录" />
    <el-table-column prop="status" label="是否启用">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column prop="name" label="操作">
      <template #default="{ row }">
        <el-button
          link
          size="small"
          type="primary"
          @click="changeDistributedManagerRoleDialog(true), getRowRole(row)"
          >分配角色</el-button
        >
        <el-button
          link
          size="small"
          type="primary"
          @click="changeEditManagerRoleDialog(true), getRowData(row)"
          >编辑角色</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <DistributedManagerRoleDialog
    :distributeVisible="distributeVisible"
    :rowRoles="rowRoles"
    @changeDistributedManagerRoleDialog="changeDistributedManagerRoleDialog"
    @confirmDistributeRoles="confirmDistributeRoles"
  />
  <EditManagerRoleDialog
    :editVisible="editVisible"
    :rowData="rowData"
    @changeEditManagerRoleDialog="changeEditManagerRoleDialog"
    @confirmModifyRowData="confirmModifyRowData"
  />
</template>

<script lang="ts" setup>
import DistributedManagerRoleDialog from '@/pages/mms/components/manager_role/DistributedManagerRole.vue'
import EditManagerRoleDialog from '@/pages/mms/components/manager_role/EditManagerRoleDialog.vue'

import {
  GetManagerRoleApiListType,
  GetManagerRolesApiDataType,
  GetManagerRolesListType,
} from '#/mms/managerRoleType'
import {
  GetManagerRoleApi,
  GetManagerRolesApi,
  ModifyManagerRolesApi,
} from '@/request/mms/managerRoleApi'
import { reactive, toRefs, onBeforeMount } from 'vue'

const state = reactive<{
  tableData: GetManagerRolesListType[]
  distributeVisible: boolean
  editVisible: boolean
  rowData: GetManagerRolesListType
  rowRoles: GetManagerRoleApiListType[]
  distributeRoleId: number
}>({
  tableData: [],
  distributeVisible: false,
  editVisible: false,
  rowData: {
    createTime: '',
    email: '',
    icon: '',
    id: -1,
    loginTime: '',
    nickname: '',
    note: '',
    password: '',
    status: -1,
    username: '',
  },
  rowRoles: [],
  distributeRoleId: -1,
})

const {
  tableData,
  distributeVisible,
  editVisible,
  rowData,
  rowRoles,
  distributeRoleId,
} = toRefs(state)

const reqData: GetManagerRolesApiDataType = {
  keyWord: '',
  pageNum: 0,
  pageSize: 10,
}

const fetchTableData = async (reqData: GetManagerRolesApiDataType) => {
  let res = await GetManagerRolesApi(reqData)
  tableData.value = res.data.list
}

onBeforeMount(() => {
  fetchTableData(reqData)
})

const changeDistributedManagerRoleDialog = (visible: boolean) => {
  distributeVisible.value = visible
}

const getRowRole = async (rowDataTable: GetManagerRolesListType) => {
  const params = { id: rowDataTable.id }
  distributeRoleId.value = rowDataTable.id

  const managerRole = await GetManagerRoleApi(params)

  if (managerRole.code === 200) {
    rowRoles.value = managerRole.data.roles
  }

  console.log(managerRole)
}

const changeEditManagerRoleDialog = (visible: boolean) => {
  editVisible.value = visible
}

const getRowData = (rowDataTable: GetManagerRolesListType) => {
  rowData.value = rowDataTable
}

const confirmModifyRowData = async (editData: GetManagerRolesListType) => {
  console.log(editData)
  fetchTableData(reqData)
}

const confirmDistributeRoles = async (selectedRoles: number[]) => {
  const roles: GetManagerRoleApiListType[] = selectedRoles.map((item) => {
    switch (item) {
      case 0:
        return {
          key: '订单管理员',
          value: 0,
        }
      case 1:
        return {
          key: '咨询管理员',
          value: 1,
        }
      case 2:
        return {
          key: '商品管理员',
          value: 2,
        }
      case 3:
        return {
          key: '超级管理员',
          value: 3,
        }
      default:
        return {
          key: '',
          value: -1,
        }
    }
  })
  const params = {
    id: distributeRoleId.value,
    roles,
  }

  await ModifyManagerRolesApi(params)
}
</script>

<style lang="less" scoped>
// .table-style {
//   max-height: 82vh;
//   overflow: auto;
// }
</style>
